iT邦幫忙

2024 iThome 鐵人賽
DAY 0
0
佛心分享-IT 人自學之術

SASS/SCSS的認識與實作系列 第 11 篇

Day11 混合器

16th鐵人賽
294 瀏覽

  • 分享至 

  • xImage
    •  
  1. 什麼是混合器？
  • 允許你定義一組樣式規則
  • 可以在程式碼的不同地方重複調用這些規則
  • 混合器非常靈活，可以接受參數，讓樣式的重用性和自適應性更高
  • 你可以避免重複編寫相似的樣式的程式碼，提升程式碼的效率和可維護性
  • 混合器的概念
  • 混合器是一個樣式片段
  • 像函數一樣可以接受參數
  • 根據參數返回相應的樣式規則
  • 在不同的地方需要相同的樣式時，使用混合器可以方便地重用這些樣式
  1. 用途
  • 簡化程式碼，避免重複的樣式
  • 提高樣式的可維護性，當某些樣式變更時，只需要修改混合器
  • 可以接受參數，提供靈活性，根據不同的需求生成不同的樣式
  1. 優點
  • 程式碼重用：重複使用的樣式可以通過混合器來統一管理，避免重複的樣式代碼。
  • 提高靈活性：混合器可以接受參數，讓樣式更具變通性，根據參數值動態生成樣式。
  • 增強可維護性：通過一個混合器定義多處使用的樣式，當樣式發生變動時，修改混合器即可實現全局樣式的變更
  1. 缺點
  • 編譯後的 CSS 體積變大：每次使用混合器時，SASS 會將所有樣式規則展開並複製到目標位置。如果多次使用混合器，重複的樣式會被多次生成，這會導致編譯後的 CSS 檔案體積增加，尤其是在大型專案中
  • 容易產生冗餘：如果混合器內包含許多樣式規則，而某些規則並不是每次都需要，那麼每次調用混合器時，這些不必要的樣式也會被引入，導致多餘樣式的出現
  • 不適合處理小量變更：混合器適合處理整組樣式，但若只是想要覆蓋其中的一部分樣式，使用混合器可能會引入不必要的複雜性

上一篇
Day10 過度巢狀&選擇器例子
下一篇
Day12 混合器例子
系列文
SASS/SCSS的認識與實作 共 30 篇
  1. 26
    Day26 模塊化 SASS 架構例子
  2. 27
    Day27 SASS 相關的開發工具
  3. 28
    Day28 自動編譯
  4. 29
    Day29 SASS 生成主題
  5. 30
    Day 30 深淺色主題實作
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19859 篇
完賽人數
529 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙